

<template id="payForOther">

  <div class="payForOther">
    <!--缴费地区选择-->
    <div class="region row bg_ff" @click="showCityList">
      <span class="col_333">缴费地区</span>
      <span class="cityName">{{initCity.cityName}}</span>
      <i class="icon iconfont icon-shangyiye-copy"></i>
    </div>
    <!--缴费项目列表-->
    <div class="row paySignListBox" v-show="isCity" v-for="item in paySignData" :key="item.cityId">
      <div class="col paySignList">
        <router-link :to="{path:'/mine/myInfo_payList', query: {id: item.corpId, cityName: item.corpName}}">
          <img class="border-radious-img"  :src="item.logoFile" v-if="item.logoFile">
          <img class="border-radious-img"  src="../../../static/image/pay_sign.png" v-else="">
          <span class="col_333">{{item.corpName}}</span>
        </router-link>
      </div>
    </div>
    <!--城市列表-->
    <div class="citys bg_f3" v-show="isShowCitys">
      <ul class="city-list">
        <li class="city-item">地区选择</li>
        <li class="city-item" v-for="city in citys" :key="city.cityCode" @click="showCity(city)">{{city.cityName}}</li>
      </ul>
    </div>
  </div>
</template>

<script>

  export default {
    data () {
      return {

        initCity: {
          cityName: '',
          id:''
        },
        isShowCitys:false,
        isCity:true,
        paySignData:[],
        citys:[]
      }
    },
    methods: {
      showCityList:function () {
        this.isShowCitys = true;
        this.isCity = false;
      },
      showCity:function (city) {
        var that = this;
        this.initCity = {
          cityName: city.cityName,
          id: city.cityCode
        };
        this.isCity = true;
        this.isShowCitys = false;
        this.$post(this.$urlAll.query_fee_unit, {cityId: this.initCity.id}).then(function (response) {
          that.paySignData = response.t.merchantList;
        })
      }
    },
    //获取后台数据，dom渲染之前
    created: function(){
      var that = this;

      //查询城市--添加缴费项目
      this.$post(this.$urlAll.query_city).then(function (response) {
        that.citys = response.t.paymentCityList;
        that.initCity = {
          cityName: response.t.paymentCityList[0].cityName,
          id: response.t.paymentCityList[0].cityCode
        };

        //查询指定城市的缴费单位
        that.$post(that.$urlAll.query_fee_unit, {cityId: that.initCity.id}).then(function (response) {
          that.paySignData = response.t.merchantList;
        })
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../style/common.css";
  .region{
    height: 0.44rem;
    margin-bottom: 0.1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.1rem;
    position: relative;
  }
  .region>span:first-child{
    font-size: 0.16rem;
  }
  .region>span.cityName{
    position: absolute;
    right: 0.4rem;
    color: #666666;
    line-height: 0.44rem;
  }
  .region .icon-shangyiye-copy{
    font-size: 0.3rem;
    color: #c9c9c9;
  }
  .paySignListBox{
    width:calc(100% - 0.2rem);
    margin: 0 auto 0.15rem;
  }
  .paySignList{
    background-color: #ffffff;
    height: 0.62rem;
    -webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.1);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding-left: 0.1rem;
    position: relative;

  }
  .paySignList a{
    display: inline-block;
    height: 100%;
    width: 100%;

  }
  .paySignList img{
    width: 0.4rem;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 0.62rem;
    /*padding-right: 0.1rem;*/
  }
  .paySignList a span{
    font-size: 0.15rem;
    padding-left: 0.1rem;
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
  }
  .citys{
    position: absolute;
    width:100%;
    top:0;
  }
  .citys .city-list{}
  .citys .city-item{
    width: 100%;
    height: 0.44rem;
    line-height: 0.44rem;
    color: #333333;
    font-size: 0.15rem;
    margin-bottom: 0.01rem;
    background: #ffffff;
    padding-left: 0.1rem;
  }
  .citys .city-item:first-child{
    font-size: 0.14rem;
    color: #666666;
    background: #f3f3f3;
  }
</style>














<!--<template id="payForOther">-->

  <!--<div class="payForOther">-->
    <!--&lt;!&ndash;缴费地区选择&ndash;&gt;-->
    <!--<div class="region row bg_ff" @click="showCityList">-->
      <!--<span class="col_333">缴费地区</span>-->
      <!--<span class="cityName">{{cityName}}</span>-->
      <!--<i class="icon iconfont icon-shangyiye-copy"></i>-->
    <!--</div>-->
    <!--&lt;!&ndash;缴费项目列表&ndash;&gt;-->
    <!--<div class="row paySignListBox" v-for="item in paySignData">-->
      <!--<div class="col paySignList">-->
        <!--<router-link :to="{path:'/mine/myInfo_payList'}">-->
          <!--<img  :src="item.imgSrc" alt=""><span class="col_333">{{item.paySignName}}</span>-->
        <!--</router-link>-->
      <!--</div>-->
    <!--</div>-->
    <!--&lt;!&ndash;城市列表&ndash;&gt;-->
    <!--<div class="citys bg_f3" v-show="isShowCitys">-->
      <!--<ul class="city-list">-->
        <!--<li class="city-item">地区选择</li>-->
        <!--<li class="city-item" v-for="city in citys" @click="showCity(city)">{{city}}</li>-->
      <!--</ul>-->
    <!--</div>-->
  <!--</div>-->
<!--</template>-->

<!--<script>-->
  <!--import zgyh from '../../assets/image/paysign1.png'-->
  <!--import sdwx from '../../assets/image/paysign2.png'-->
  <!--import fsq from '../../assets/image/paysign3.png'-->
  <!--export default {-->
    <!--data () {-->
      <!--return {-->
        <!--cityName:"济南市",-->
        <!--isShowCitys:false,-->
        <!--paySignData:[-->
          <!--{-->
            <!--paySignID:1,-->
            <!--imgSrc:fsq,-->
            <!--paySignName:'山东省分行党务'-->
          <!--},-->
          <!--{-->
            <!--paySignID:2,-->
            <!--imgSrc:sdwx,-->
            <!--paySignName:'山东省青岛第二卫生学校'-->
          <!--},-->
          <!--{-->
            <!--paySignID:3,-->
            <!--imgSrc:zgyh,-->
            <!--paySignName:'福山区小红花假日风景幼儿园'-->
          <!--}-->
        <!--],-->
        <!--citys:[-->
          <!--"济南市","青岛市","淄博市","枣庄市","东营市","烟台市","潍坊市","济宁市","泰安市",-->
          <!--"威海市","日照市","莱芜市","临沂市","德州市","聊城市","滨州市","菏泽市"-->
        <!--]-->
      <!--}-->
    <!--},-->
    <!--methods: {-->
      <!--showCityList:function () {-->
        <!--this.isShowCitys = true-->
      <!--},-->
      <!--showCity:function (city) {-->
        <!--this.cityName = city;-->
        <!--this.isShowCitys = false;-->
<!--//        console.log(city);-->
      <!--}-->
    <!--},-->
    <!--//获取后台数据，dom渲染之前-->
    <!--created: function(){-->

    <!--}-->
  <!--}-->
<!--</script>-->

<!--&lt;!&ndash; Add "scoped" attribute to limit CSS to this component only &ndash;&gt;-->
<!--<style scoped>-->
  <!--@import "../../style/common.css";-->
  <!--.region{-->
    <!--height: 0.44rem;-->
    <!--margin-bottom: 0.1rem;-->
    <!--align-items: center;-->
    <!--justify-content: space-between;-->
    <!--padding: 0 0.1rem;-->
    <!--position: relative;-->
  <!--}-->
  <!--.region>span:first-child{-->
    <!--font-size: 0.16rem;-->
  <!--}-->
  <!--.region>span.cityName{-->
    <!--position: absolute;-->
    <!--right: 0.4rem;-->
    <!--color: #666666;-->
    <!--line-height: 0.44rem;-->
  <!--}-->
  <!--.region .icon-shangyiye-copy{-->
    <!--font-size: 0.3rem;-->
    <!--color: #c9c9c9;-->
  <!--}-->
  <!--.paySignListBox{-->
    <!--width:calc(100% - 0.2rem);-->
    <!--margin: 0 auto 0.15rem;-->
  <!--}-->
  <!--.paySignList{-->
    <!--background-color: #ffffff;-->
    <!--height: 0.62rem;-->
    <!-- -webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.1);-->
    <!-- -moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.1);-->
    <!--box-shadow: 0px 0px 9px rgba(0,0,0,0.1);-->
    <!-- -webkit-border-radius: 4px;-->
    <!-- -moz-border-radius: 4px;-->
    <!--border-radius: 4px;-->
    <!--padding-left: 0.1rem;-->
    <!--position: relative;-->

  <!--}-->
  <!--.paySignList a{-->
    <!--display: inline-block;-->
    <!--height: 100%;-->
    <!--width: 100%;-->

  <!--}-->
  <!--.paySignList img{-->
    <!--width: 0.4rem;-->
    <!--position: absolute;-->
    <!--top: 50%;-->
    <!-- -webkit-transform: translateY(-50%);-->
    <!-- -moz-transform: translateY(-50%);-->
    <!-- -ms-transform: translateY(-50%);-->
    <!-- -o-transform: translateY(-50%);-->
    <!--transform: translateY(-50%);-->
    <!--line-height: 0.62rem;-->
    <!--padding-right: 0.1rem;-->
  <!--}-->
  <!--.paySignList a span{-->
    <!--font-size: 0.15rem;-->
    <!--padding-left: 0.1rem;-->
    <!--position: absolute;-->
    <!--left: 0.5rem;-->
    <!--top: 50%;-->
    <!--transform: translateY(-50%);-->
  <!--}-->
  <!--.citys{-->
    <!--position: absolute;-->
    <!--width:100%;-->
    <!--top:0;-->
  <!--}-->
  <!--.citys .city-list{}-->
  <!--.citys .city-item{-->
    <!--width: 100%;-->
    <!--height: 0.44rem;-->
    <!--line-height: 0.44rem;-->
    <!--color: #333333;-->
    <!--font-size: 0.15rem;-->
    <!--margin-bottom: 0.01rem;-->
    <!--background: #ffffff;-->
    <!--padding-left: 0.1rem;-->
  <!--}-->
  <!--.citys .city-item:first-child{-->
    <!--font-size: 0.14rem;-->
    <!--color: #666666;-->
    <!--background: #f3f3f3;-->
  <!--}-->
<!--</style>-->
